码问

Appearance

背景简介 ​

云跟贴的DOM节点直接嵌入到了文章容器页面里，广大的站长朋友门，可以很方便地通过覆盖已有的CSS(层叠样式表---Cascading Style Sheets,是一种用来表现HTML文件样式的计算机语言)来定制外观样式（当然了，您需要了解基本的CSS的语法规则，并且我们也不推荐您无底线地修改，造成地兼容性问题，会让我们都很头疼，适可而止就好了）

云跟贴的视图都包裹在一个祖先DOM节点(DIV#yun-tie-sdk-wrap)下，想要覆盖某处DOM节点的样式，只需在云跟贴代码的下面，插入相应规则的样式代码即可。比如要修改整体的字体样式，如下：

css
/* 云跟贴视图代码 */
#yun-tie-sdk-wrap {
    /*将字体调整为 微软雅黑*/
    font-family: Microsoft Yahei;
    /* 将字体大小调整为 14像素 */
    font-size: 14px;
}
/* 调整云跟贴区域和上面文章内容区域的间距 */
#yun-tie-sdk-wrap .tie-title-bar {
    /* 默认是25像素，下面调整成10像素 */
    padding-top: 10px;
}
/* 云跟贴视图代码 */
#yun-tie-sdk-wrap {
    /*将字体调整为 微软雅黑*/
    font-family: Microsoft Yahei;
    /* 将字体大小调整为 14像素 */
    font-size: 14px;
}
/* 调整云跟贴区域和上面文章内容区域的间距 */
#yun-tie-sdk-wrap .tie-title-bar {
    /* 默认是25像素，下面调整成10像素 */
    padding-top: 10px;
}

主要节点样式调整 ​

标题栏和文章内容的间距 ​

image

css
#yun-tie-sdk-wrap .tie-title-bar {
    /* 默认是25像素，下面调整成15像素 */
    padding-top: 15px;
}
</style>
#yun-tie-sdk-wrap .tie-title-bar {
    /* 默认是25像素，下面调整成15像素 */
    padding-top: 15px;
}
</style>

标题栏 参与人数 ​

image

css
#yun-tie-sdk-wrap .tie-title-bar .active-wrap .tie-actCount {
    /* 字体颜色 */
    color: #d91736;
    /* 字体大小 */
    font-size: 24px;
}
#yun-tie-sdk-wrap .tie-title-bar .active-wrap .tie-actCount {
    /* 字体颜色 */
    color: #d91736;
    /* 字体大小 */
    font-size: 24px;
}

发帖框 ​

image

css
#yun-tie-sdk-wrap .tie-input-bar {
    /* 发帖框和标题栏的间距 */
    margin-top: 10px;
}
/* 发帖框的高度(需要修改两处) */
#yun-tie-sdk-wrap .input-box {
    height: 120px;
}
#yun-tie-sdk-wrap .input-box .tie-textarea, #yun-tie-sdk-wrap .input-box .input-tips {
    height: 80px;
}
#yun-tie-sdk-wrap .tie-input-bar {
    /* 发帖框和标题栏的间距 */
    margin-top: 10px;
}
/* 发帖框的高度(需要修改两处) */
#yun-tie-sdk-wrap .input-box {
    height: 120px;
}
#yun-tie-sdk-wrap .input-box .tie-textarea, #yun-tie-sdk-wrap .input-box .input-tips {
    height: 80px;
}

发帖框底部横条 ​

image

css
/* 发帖框底部 横条 */
#yun-tie-sdk-wrap .input-box .tie-submit-row {
    height: 40px;
    /* 背景色 */
    background-color: #f7f8f9;
}
/* 发帖框底部 横条 */
#yun-tie-sdk-wrap .input-box .tie-submit-row {
    height: 40px;
    /* 背景色 */
    background-color: #f7f8f9;
}

发帖框 用户信息 ​

image

css
/* 头像图片 */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info img {
    /* 头像大小 */
    width: 32px;
    height: 32px;
    /* 距离四周的间距 */
    margin: 4px 10px 4px 8px;
    /* 鼠标样式 */
    cursor: pointer;
}
/* 昵称 */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info .nickname {
    /* 字体颜色 */
    color: #3f96ec;
    cursor: pointer;
}
/* 退出链接 */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info .exit {
    color: #acacac;
    cursor: pointer;
}
/* 退出链接(鼠标悬停效果) */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info .exit:hover {
    color: #616060;
}
/* 头像图片 */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info img {
    /* 头像大小 */
    width: 32px;
    height: 32px;
    /* 距离四周的间距 */
    margin: 4px 10px 4px 8px;
    /* 鼠标样式 */
    cursor: pointer;
}
/* 昵称 */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info .nickname {
    /* 字体颜色 */
    color: #3f96ec;
    cursor: pointer;
}
/* 退出链接 */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info .exit {
    color: #acacac;
    cursor: pointer;
}
/* 退出链接(鼠标悬停效果) */
#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info .exit:hover {
    color: #616060;
}

发帖按钮 ​

image

css
#yun-tie-sdk-wrap .input-box .tie-submit-row .tie-submit-btn {
    width: 112px;
    height: 40px;
    line-height: 40px;
}
#yun-tie-sdk-wrap .input-box .tie-submit-row .tie-submit-btn {
    width: 112px;
    height: 40px;
    line-height: 40px;
}

选项卡栏 ​

image

css
/* 选项卡栏 */
#yun-tie-sdk-wrap .tie-tab-bar {
    /* 距离上面发帖框的间距 */
    margin-top: 27px;
    /* 底部边框线： 实线 1像素宽 边线颜色 */
    border-bottom: solid 1px #dee4e9;
}
/* 选项卡 */
#yun-tie-sdk-wrap .tie-tab-bar li {
    /* 文本居中展示 */
    text-align: center;
    /* 鼠标悬停，手型效果 */
    cursor: pointer;
    /* 高度 */
    height: 32px;
    /* 字体行高 */
    line-height: 33px;
}
/* 选中状态的选项卡 */
#yun-tie-sdk-wrap .tie-tab-bar li.z-fcs {
    /* 字体样式加粗 */
    font-weight: bold;
    /* 左上角 4像素的圆角效果 */
    border-top-left-radius: 4px;
    /* 右上角 4像素的圆角效果 */
    border-top-right-radius: 4px;
    /* 白色背景 */
    background-color: #fff;
}
/* 选项卡栏 */
#yun-tie-sdk-wrap .tie-tab-bar {
    /* 距离上面发帖框的间距 */
    margin-top: 27px;
    /* 底部边框线： 实线 1像素宽 边线颜色 */
    border-bottom: solid 1px #dee4e9;
}
/* 选项卡 */
#yun-tie-sdk-wrap .tie-tab-bar li {
    /* 文本居中展示 */
    text-align: center;
    /* 鼠标悬停，手型效果 */
    cursor: pointer;
    /* 高度 */
    height: 32px;
    /* 字体行高 */
    line-height: 33px;
}
/* 选中状态的选项卡 */
#yun-tie-sdk-wrap .tie-tab-bar li.z-fcs {
    /* 字体样式加粗 */
    font-weight: bold;
    /* 左上角 4像素的圆角效果 */
    border-top-left-radius: 4px;
    /* 右上角 4像素的圆角效果 */
    border-top-right-radius: 4px;
    /* 白色背景 */
    background-color: #fff;
}

推广文案 ​

image

css
#yun-tie-sdk-wrap .tie-tab-bar .promote-txt {
    /* 字体颜色 */
    color: #c9c9c9;
    /* 字体行高 */
    line-height: 33px;
    /* 字体大小 */
    font-size: 12px;
}
#yun-tie-sdk-wrap .tie-tab-bar .promote-txt {
    /* 字体颜色 */
    color: #c9c9c9;
    /* 字体行高 */
    line-height: 33px;
    /* 字体大小 */
    font-size: 12px;
}

单条帖子 ​

image

css
#yun-tie-sdk-wrap .single-tie {
    /* 背景色 */
    background-color: #fff;
    /* 顶部边框 */
    border-top: solid 1px #dee4e9;
    overflow: hidden;
    /* 内边距：上 右 下 左 */
    padding: 20px 8px 10px 10px;
}
/* 鼠标悬停在某条帖子上面时，变换背景色 */
#yun-tie-sdk-wrap .single-tie:hover {
    background-color: #f9fafa;
}
#yun-tie-sdk-wrap .single-tie {
    /* 背景色 */
    background-color: #fff;
    /* 顶部边框 */
    border-top: solid 1px #dee4e9;
    overflow: hidden;
    /* 内边距：上 右 下 左 */
    padding: 20px 8px 10px 10px;
}
/* 鼠标悬停在某条帖子上面时，变换背景色 */
#yun-tie-sdk-wrap .single-tie:hover {
    background-color: #f9fafa;
}

帖子里的头像部分 ​

image

css
#yun-tie-sdk-wrap .single-tie .photo {
    position: relative;
    float: left;
    /* 头像大小 更改下面三个属性 */
    width: 42px;
    height: 42px;
    margin-right: -42px;
    /* 头像大小 更改上面三个属性 */
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
}
/* 头像图片大小 */
#yun-tie-sdk-wrap .single-tie .photo img {
    width: 42px;
    height: 42px;
}
#yun-tie-sdk-wrap .single-tie .photo {
    position: relative;
    float: left;
    /* 头像大小 更改下面三个属性 */
    width: 42px;
    height: 42px;
    margin-right: -42px;
    /* 头像大小 更改上面三个属性 */
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
}
/* 头像图片大小 */
#yun-tie-sdk-wrap .single-tie .photo img {
    width: 42px;
    height: 42px;
}

发帖人称谓部分 ​

image

css
/* 和下面帖子内容的间距 */
#yun-tie-sdk-wrap .single-tie > .tie-bdy > .bdy-inner > .tie-author {
    margin-bottom: 12px;
}
/* 和下面帖子内容的间距 */
#yun-tie-sdk-wrap .single-tie > .tie-bdy > .bdy-inner > .tie-author {
    margin-bottom: 12px;
}

发帖人昵称 ​

image

css
#yun-tie-sdk-wrap .single-tie .tie-author .name-nick {
    color: #3f96ec;
    display: inline-block;
    cursor: pointer;
    /* 字体类型---微软雅黑 */
    font-family: Microsoft YaHei;
}
#yun-tie-sdk-wrap .single-tie .tie-author .name-nick {
    color: #3f96ec;
    display: inline-block;
    cursor: pointer;
    /* 字体类型---微软雅黑 */
    font-family: Microsoft YaHei;
}

站点地理位置信息 ​

image

css
#yun-tie-sdk-wrap .single-tie .tie-author .name-desp {
    /* 距离右边间距 5 像素 */
    margin-right: 5px;
}
#yun-tie-sdk-wrap .single-tie .tie-author .name-desp, #yun-tie-sdk-wrap .single-tie .tie-author .name-ip {
    color: #999;
    /* 距离左边间距 8 像素 */
    margin: 0 0 0 8px;
}
#yun-tie-sdk-wrap .single-tie .tie-author .name-desp {
    /* 距离右边间距 5 像素 */
    margin-right: 5px;
}
#yun-tie-sdk-wrap .single-tie .tie-author .name-desp, #yun-tie-sdk-wrap .single-tie .tie-author .name-ip {
    color: #999;
    /* 距离左边间距 8 像素 */
    margin: 0 0 0 8px;
}

发帖时间部分 ​

image

css
#yun-tie-sdk-wrap .single-tie .tie-time {
    /* 字体颜色 */
    color: #c9c9c9;
    /* 左边间距 10 像素 */
    margin: 0 0 0 10px;
    /* 右浮动，形成右对齐的效果 */
    float: right;
}
#yun-tie-sdk-wrap .single-tie .tie-time {
    /* 字体颜色 */
    color: #c9c9c9;
    /* 左边间距 10 像素 */
    margin: 0 0 0 10px;
    /* 右浮动，形成右对齐的效果 */
    float: right;
}

帖子内容 ​

image

css
#yun-tie-sdk-wrap .single-tie .tie-cnt {
    /* 字体大小 */
    font-size: 14px;
    /* 换行方式： */
    word-wrap: break-word;
    /* 字体行高 */
    line-height: 20px;
    /* 距离上、下元素的间距分别是9、28像素 */
    margin: 9px 0 28px 0;
}
#yun-tie-sdk-wrap .single-tie .tie-cnt {
    /* 字体大小 */
    font-size: 14px;
    /* 换行方式： */
    word-wrap: break-word;
    /* 字体行高 */
    line-height: 20px;
    /* 距离上、下元素的间距分别是9、28像素 */
    margin: 9px 0 28px 0;
}

帖子里 工具栏部分 ​

image

css
#yun-tie-sdk-wrap .single-tie .tool-bar {
    /* 右对齐方式 */
    text-align: right;
    /* 文字颜色 */
    color: #999;
    /* 距右边距 18像素 */
    margin-right: 18px;
    /* 距左边距 10像素 */
    margin-bottom: 10px;
}
#yun-tie-sdk-wrap .single-tie .tool-bar {
    /* 右对齐方式 */
    text-align: right;
    /* 文字颜色 */
    color: #999;
    /* 距右边距 18像素 */
    margin-right: 18px;
    /* 距左边距 10像素 */
    margin-bottom: 10px;
}

顶踩按钮 ​

image

css
#yun-tie-sdk-wrap .single-tie .tool-bar .i-up, #yun-tie-sdk-wrap .single-tie .tool-bar .i-down {
    /* 图标大小 */
    width: 14px;
    height: 16px;
    /* 四周(上、右、下、左)间距 */
    margin: 0 5px 0 15px;
    /* 相对原来的位置向上偏移3像素 */
    position: relative;
    top: -3px;
}

/* 更改按钮上的图标 */
#yun-tie-sdk-wrap .single-tie .tool-bar .i-up {
    background: url(icons.png) 0 0 no-repeat
}
#yun-tie-sdk-wrap .single-tie .tool-bar .i-down {
    background: url(icons.png) 0 0 no-repeat
}

/* 顶、踩按钮➕1效果 */
#yun-tie-sdk-wrap .single-tie .tool-bar .up-one,
#yun-tie-sdk-wrap .single-tie .tool-bar .down-one {
  /* 绝对定位 */
  position: absolute;
  top: -25px;
  left: 20px;
  /* 字体大小 */
  font-size: 18px;
  color: #e31436;
  font-family: Arial;
  /* 斜体字体 */
  font-style: italic;
  z-index: 9;
  /* 初始透明度为0 */
  filter: alpha(opacity=0);
}
/* 动画行为 持续时间 1 秒 线性渐变 */
#yun-tie-sdk-wrap .single-tie .tool-bar .up-one {
  -webkit-animation: upone 1s linear forwards;
  animation: upone 1s linear forwards;
}
#yun-tie-sdk-wrap .single-tie .tool-bar .down-one {
  color: #3f96ec;
  -webkit-animation: upone 1s linear forwards;
  animation: upone 1s linear forwards;
}
/* 动画过度帧(兼容写法) */
@-webkit-keyframes upone {
  0% {
    transform: scale(1);
  }
  32% {
    transform: scale(1.4);
  }
  68% {
    transform: scale(1.4);
  }
  99% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
/* 动画过度帧 */
@keyframes upone {
  0% {
    transform: scale(1);
  }
  32% {
    transform: scale(1.4);
  }
  68% {
    transform: scale(1.4);
  }
  99% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
#yun-tie-sdk-wrap .single-tie .tool-bar .i-up, #yun-tie-sdk-wrap .single-tie .tool-bar .i-down {
    /* 图标大小 */
    width: 14px;
    height: 16px;
    /* 四周(上、右、下、左)间距 */
    margin: 0 5px 0 15px;
    /* 相对原来的位置向上偏移3像素 */
    position: relative;
    top: -3px;
}

/* 更改按钮上的图标 */
#yun-tie-sdk-wrap .single-tie .tool-bar .i-up {
    background: url(icons.png) 0 0 no-repeat
}
#yun-tie-sdk-wrap .single-tie .tool-bar .i-down {
    background: url(icons.png) 0 0 no-repeat
}

/* 顶、踩按钮➕1效果 */
#yun-tie-sdk-wrap .single-tie .tool-bar .up-one,
#yun-tie-sdk-wrap .single-tie .tool-bar .down-one {
  /* 绝对定位 */
  position: absolute;
  top: -25px;
  left: 20px;
  /* 字体大小 */
  font-size: 18px;
  color: #e31436;
  font-family: Arial;
  /* 斜体字体 */
  font-style: italic;
  z-index: 9;
  /* 初始透明度为0 */
  filter: alpha(opacity=0);
}
/* 动画行为 持续时间 1 秒 线性渐变 */
#yun-tie-sdk-wrap .single-tie .tool-bar .up-one {
  -webkit-animation: upone 1s linear forwards;
  animation: upone 1s linear forwards;
}
#yun-tie-sdk-wrap .single-tie .tool-bar .down-one {
  color: #3f96ec;
  -webkit-animation: upone 1s linear forwards;
  animation: upone 1s linear forwards;
}
/* 动画过度帧(兼容写法) */
@-webkit-keyframes upone {
  0% {
    transform: scale(1);
  }
  32% {
    transform: scale(1.4);
  }
  68% {
    transform: scale(1.4);
  }
  99% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
/* 动画过度帧 */
@keyframes upone {
  0% {
    transform: scale(1);
  }
  32% {
    transform: scale(1.4);
  }
  68% {
    transform: scale(1.4);
  }
  99% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

按钮分隔线 ​

image

css
#yun-tie-sdk-wrap .single-tie .tool-bar .i-split {
    /* 分隔线颜色 */
    color: #dee4e9;
    /* 左右间距 */
    margin: 0 10px;
}
#yun-tie-sdk-wrap .single-tie .tool-bar .i-split {
    /* 分隔线颜色 */
    color: #dee4e9;
    /* 左右间距 */
    margin: 0 10px;
}

回复框 ​

image

css
#yun-tie-sdk-wrap .input-box.z-reply {
    margin-top: 20px;
    margin-bottom: 10px;
}
/* 和发帖框相同的DOM节点 */
#yun-tie-sdk-wrap .input-box {
    position: relative;
    border: solid 1px #dee4e9;
    height: 155px;
    border-radius: 4px;
    overflow: hidden;
}
/* 聚焦状态时 边框变成红色 */
#yun-tie-sdk-wrap .input-box.z-fcs {
  border-color: #ef2d36;
}
#yun-tie-sdk-wrap .input-box.z-reply {
    margin-top: 20px;
    margin-bottom: 10px;
}
/* 和发帖框相同的DOM节点 */
#yun-tie-sdk-wrap .input-box {
    position: relative;
    border: solid 1px #dee4e9;
    height: 155px;
    border-radius: 4px;
    overflow: hidden;
}
/* 聚焦状态时 边框变成红色 */
#yun-tie-sdk-wrap .input-box.z-fcs {
  border-color: #ef2d36;
}

分享栏 ​

image

css
.shareListWin {
    /* 绝对定位 和 坐标 */
    position: absolute;
    top: -999px;
    left: -999px;
    /* 宽度 和 高度 */
    width: 101px;
    height: 34px;
    /* 边框 1像素宽 实线 颜色 */
    border: 1px solid #dbdcdc;
    /* 背景色 */
    background: #fff;
    box-sizing: content-box;
    /* 展示优先级 */
    z-index: 2147483650;
}

/* 分享qq */
.shareListWin .i-qq {
    margin-left: 8px;
    /* qq图标 */
    background: url(icons.png) no-repeat;
}
/* 分享微博 */
.shareListWin .i-weibo {
    /* 微博图标 */
    background: url(icons.png) no-repeat;
}
/* 分享易信 */
.shareListWin .i-yixin {
    /* 易信图标 */
    background: url(icons.png) no-repeat;
}
.shareListWin {
    /* 绝对定位 和 坐标 */
    position: absolute;
    top: -999px;
    left: -999px;
    /* 宽度 和 高度 */
    width: 101px;
    height: 34px;
    /* 边框 1像素宽 实线 颜色 */
    border: 1px solid #dbdcdc;
    /* 背景色 */
    background: #fff;
    box-sizing: content-box;
    /* 展示优先级 */
    z-index: 2147483650;
}

/* 分享qq */
.shareListWin .i-qq {
    margin-left: 8px;
    /* qq图标 */
    background: url(icons.png) no-repeat;
}
/* 分享微博 */
.shareListWin .i-weibo {
    /* 微博图标 */
    background: url(icons.png) no-repeat;
}
/* 分享易信 */
.shareListWin .i-yixin {
    /* 易信图标 */
    background: url(icons.png) no-repeat;
}

楼层贴 ​

image

css
#yun-tie-sdk-wrap .floor-tie {
    /* 背景色 */
    background-color: #f5fafe;
    /* 每层向内缩进 3 像素 */
    padding: 3px;
    /* 边框样式 */
    border: solid 1px #dee4e9;
}
#yun-tie-sdk-wrap .floor-tie {
    /* 背景色 */
    background-color: #f5fafe;
    /* 每层向内缩进 3 像素 */
    padding: 3px;
    /* 边框样式 */
    border: solid 1px #dee4e9;
}

高层折叠楼层 ​

imageimage

css
#yun-tie-sdk-wrap .floor-tie .hide-middle-posts {
    /* 鼠标 手型 样式 */
    cursor: pointer;
    /* 高度 20 像素 */
    height: 20px;
    /* 文字行高 22 像素 */
    line-height: 22px;
    /* 上下 20 像素的 外 */
    margin: 20px 0;
    /* 文字居中对齐 */
    text-align: center;
}
#yun-tie-sdk-wrap .floor-tie .hide-middle-posts {
    /* 鼠标 手型 样式 */
    cursor: pointer;
    /* 高度 20 像素 */
    height: 20px;
    /* 文字行高 22 像素 */
    line-height: 22px;
    /* 上下 20 像素的 外 */
    margin: 20px 0;
    /* 文字居中对齐 */
    text-align: center;
}

加载更多 ​

image

css
#yun-tie-sdk-wrap .tie-panel-bar .tie-load-more {
    /* 文字居中对齐 */
    text-align: center;
    /* 54像素的高度 */
    height: 54px;
    /* 行高 */
    line-height: 50px;
    /* 距离上面元素的间距 */
    margin-top: 18px;
    /* 字体类型 */
    font-family: "Microsoft YaHei";
    /* 字体大小 */
    font-size: 18px;
    /* 字体颜色 */
    color: #999;
    /* 边框圆角效果 */
    border-radius: 4px;
}

/* 鼠标悬停效果(边框和字体颜色改变) */
#yun-tie-sdk-wrap .tie-panel-bar .tie-load-more:hover {
    color: #3f96ec;
    border-color: #3f96ec;
}
#yun-tie-sdk-wrap .tie-panel-bar .tie-load-more {
    /* 文字居中对齐 */
    text-align: center;
    /* 54像素的高度 */
    height: 54px;
    /* 行高 */
    line-height: 50px;
    /* 距离上面元素的间距 */
    margin-top: 18px;
    /* 字体类型 */
    font-family: "Microsoft YaHei";
    /* 字体大小 */
    font-size: 18px;
    /* 字体颜色 */
    color: #999;
    /* 边框圆角效果 */
    border-radius: 4px;
}

/* 鼠标悬停效果(边框和字体颜色改变) */
#yun-tie-sdk-wrap .tie-panel-bar .tie-load-more:hover {
    color: #3f96ec;
    border-color: #3f96ec;
}

分页栏 ​

image

css
#yun-tie-sdk-wrap .tie-page {
    text-align: center;
    /* 上下 35像素的内边距 */
    padding: 35px 0;
    border-top: solid 1px #dee4e9;
    color: #999;
}
#yun-tie-sdk-wrap .tie-page {
    text-align: center;
    /* 上下 35像素的内边距 */
    padding: 35px 0;
    border-top: solid 1px #dee4e9;
    color: #999;
}

页码输入框 ​

image

css
#yun-tie-sdk-wrap .tie-page input {
    width: 50px;
    text-align: center;
    border: solid 1px #dee4e9;
    color: #616060;
    height: 25px;
    margin: 0 6px;
    /* 3像素的圆角效果 */
    border-radius: 3px;
    vertical-align: middle;
}
/* 光标聚焦到输入框内时，改变边框颜色 */
#yun-tie-sdk-wrap .tie-page input:focus {
    border-color: #616060;
}
#yun-tie-sdk-wrap .tie-page input {
    width: 50px;
    text-align: center;
    border: solid 1px #dee4e9;
    color: #616060;
    height: 25px;
    margin: 0 6px;
    /* 3像素的圆角效果 */
    border-radius: 3px;
    vertical-align: middle;
}
/* 光标聚焦到输入框内时，改变边框颜色 */
#yun-tie-sdk-wrap .tie-page input:focus {
    border-color: #616060;
}

页码数字链接 ​

image

css
#yun-tie-sdk-wrap .tie-page .page-num {
    /* 左右间隔10像素 */
    margin: 0 10px;
    font-family: Arial;
    /* 字体大小 */
    font-size: 14px;
    color: #999;
}
/* 鼠标悬停时 文字颜色变红 */
#yun-tie-sdk-wrap .tie-page .page-num:hover {
    color: #e31436;
}

/* 当前页 第2页  页码样式*/
#yun-tie-sdk-wrap .tie-page .page-num.z-current {
    /* 文字白色 */
    color: #fff;
    /* 背景红色 */
    background-color: #e31436;
    min-width: 24px;
    cursor: default;
    margin: 0 7px;
    border-radius: 4px;
}
#yun-tie-sdk-wrap .tie-page .page-num {
    /* 左右间隔10像素 */
    margin: 0 10px;
    font-family: Arial;
    /* 字体大小 */
    font-size: 14px;
    color: #999;
}
/* 鼠标悬停时 文字颜色变红 */
#yun-tie-sdk-wrap .tie-page .page-num:hover {
    color: #e31436;
}

/* 当前页 第2页  页码样式*/
#yun-tie-sdk-wrap .tie-page .page-num.z-current {
    /* 文字白色 */
    color: #fff;
    /* 背景红色 */
    background-color: #e31436;
    min-width: 24px;
    cursor: default;
    margin: 0 7px;
    border-radius: 4px;
}

页码跳转按钮 上一页 下一页 ​

image

css
#yun-tie-sdk-wrap .tie-page .to-btn {
    width: 24px;
    background-color: #e6f1f9;
    border-radius: 2px;
    /* 距离右边元素 35 像素的间距 */
    margin: 0 35px 0 6px;
}
/* 鼠标悬停时，改变文字和背景颜色 */
#yun-tie-sdk-wrap .tie-page .to-btn:hover {
    color: #4e9ded;
    background-color: #d2e8ff;
}

/* 上一页 和 下一页 按钮 鼠标悬停效果 */
#yun-tie-sdk-wrap .tie-page .page-btn:hover {
    color: #616060;
}
#yun-tie-sdk-wrap .tie-page .to-btn {
    width: 24px;
    background-color: #e6f1f9;
    border-radius: 2px;
    /* 距离右边元素 35 像素的间距 */
    margin: 0 35px 0 6px;
}
/* 鼠标悬停时，改变文字和背景颜色 */
#yun-tie-sdk-wrap .tie-page .to-btn:hover {
    color: #4e9ded;
    background-color: #d2e8ff;
}

/* 上一页 和 下一页 按钮 鼠标悬停效果 */
#yun-tie-sdk-wrap .tie-page .page-btn:hover {
    color: #616060;
}

帖子列表为空时的提示栏 ​

image

css
#yun-tie-sdk-wrap .tie-panel-bar .tie-empty-tip {
    color: #999999;
    font-size: 14px;
    text-align: center;
    line-height: 1em;
    /* 上下 66像素的间距 */
    padding: 66px 0;
}
#yun-tie-sdk-wrap .tie-panel-bar .tie-empty-tip {
    color: #999999;
    font-size: 14px;
    text-align: center;
    line-height: 1em;
    /* 上下 66像素的间距 */
    padding: 66px 0;
}

个人弹窗页面 ​

image

css
#yun-tie-sdk-wrap .tie-i-wrap {
    /* 固定定位 */
    position: fixed;
    /* 展示在页面中央 */
    width: 752px;
    height: 620px;
    top: 50%;
    left: 50%;
    margin-top: -310px;
    margin-left: -410px;
    /* 左右 34 像素的内边距 */
    padding: 0 34px;
    background: #fff;
    /* 展示层级 */
    z-index: 2147483649;
    /* 边框阴影效果 */
    box-shadow: 0 0 30px 3px rgba(119, 118, 118, 0.33);
}
#yun-tie-sdk-wrap .tie-i-wrap {
    /* 固定定位 */
    position: fixed;
    /* 展示在页面中央 */
    width: 752px;
    height: 620px;
    top: 50%;
    left: 50%;
    margin-top: -310px;
    margin-left: -410px;
    /* 左右 34 像素的内边距 */
    padding: 0 34px;
    background: #fff;
    /* 展示层级 */
    z-index: 2147483649;
    /* 边框阴影效果 */
    box-shadow: 0 0 30px 3px rgba(119, 118, 118, 0.33);
}

个人页 头像 ​

image

css
#yun-tie-sdk-wrap .tie-i-wrap .title-bar .photo {
    /* 圆角效果 */
    border-radius: 50%;
    width: 62px;
    height: 62px;
    margin-top: 20px;
    /* 向下偏移14 像素 */
    position: relative;
    top: 14px;
}
#yun-tie-sdk-wrap .tie-i-wrap .title-bar .photo {
    /* 圆角效果 */
    border-radius: 50%;
    width: 62px;
    height: 62px;
    margin-top: 20px;
    /* 向下偏移14 像素 */
    position: relative;
    top: 14px;
}

个人页 昵称 ​

image

css
#yun-tie-sdk-wrap .tie-i-wrap .title-bar .nickname {
    font-size: 14px;
    line-height: 14px;
    position: relative;
    top: 10px;
    margin-top: 10px;
    color: #333;
}
#yun-tie-sdk-wrap .tie-i-wrap .title-bar .nickname {
    font-size: 14px;
    line-height: 14px;
    position: relative;
    top: 10px;
    margin-top: 10px;
    color: #333;
}

个人页 选项卡栏 ​

image

css
#yun-tie-sdk-wrap .tie-i-wrap .tab-bar {
    zoom: 1;
    font-size: 14px;
    margin-top: 30px;
    height: 40px;
    overflow: hidden;
}

/* 聚焦状态的选项卡 */
#yun-tie-sdk-wrap .tie-i-wrap .tab-bar > div.z-fcs {
    /* 白色文字 */
    color: #fff;
    /* 红色背景 */
    background-color: #e31436;
    /* 隐藏边框 */
    border: none;
}
#yun-tie-sdk-wrap .tie-i-wrap .tab-bar {
    zoom: 1;
    font-size: 14px;
    margin-top: 30px;
    height: 40px;
    overflow: hidden;
}

/* 聚焦状态的选项卡 */
#yun-tie-sdk-wrap .tie-i-wrap .tab-bar > div.z-fcs {
    /* 白色文字 */
    color: #fff;
    /* 红色背景 */
    background-color: #e31436;
    /* 隐藏边框 */
    border: none;
}

个人页 来自信息 ​

image

css
#yun-tie-sdk-wrap .tie-i-wrap .single-tie .tool-bar .essay-link {
    /* 左浮动对齐 */
    float: left;
    /* 浅灰色文字 */
    color: #999;
}
#yun-tie-sdk-wrap .tie-i-wrap .single-tie .tool-bar .essay-link {
    /* 左浮动对齐 */
    float: left;
    /* 浅灰色文字 */
    color: #999;
}